<template>
  <div class="cart">
    <div class="cart-list" v-if="cart.length>0">
      <div class="cart-item" v-for="item in cart" :key="item.id">
      <div class="cart-l"><van-checkbox v-model="item.checked"></van-checkbox></div>
        <div class="cart-r">
          <van-card
            :price="item.price+'.00'"
            desc="描述信息"
            :title="item.title"
            :thumb="item.icon"
          >
            <template #desc>
              <van-stepper v-model="item.count" />
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <div v-else>购物车空空如也</div>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {

    }
  },
  computed: {
    ...mapState({
      cart: state => state.cart.cart
    })
  },
  created() {
    console.log(this.cart)
  }
}
</script>

<style lang="scss" scoped>
.cart{
  padding: 10px;
  .cart-item{
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #eee;
    margin-bottom: 8px;
    .cart-l{
      flex: 0.5;
      display: flex;
      justify-content: center;
    }
    .cart-r{
      flex: 3;
      .van-stepper{
        margin-top: 10px;
      }
    }
  }
}
</style>